/**
 * created by zhouli on 2018/12/20
 * 只能授权
 */
import React from 'react';
import {connect} from 'react-redux';
import {
  Icon, Modal, Button, Input, Spin, Select, Tabs,
  Table, Badge, Popover
} from 'antd';
import 'styles/permission-setting/role-permission-setting/role-permission-detail/role-permission-detail.scss';
import RPService from 'containers/permission-setting/role-permission-setting/role-permission-setting.service';
//公共函数
import {deepCopy, isEmptyObj, messages} from 'share/common';
import menuRoute from 'routes/menuRoute';
//需要在这个里面去配置弹窗类型
//顶部信息
import BasicInfo from 'components/basic-info';
import PermissionData from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-data/permission-data';
import PermissionOrg from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-org/permission-org';
import PermissionPerson from 'containers/permission-setting/role-permission-setting/role-permission-detail/components/permission-person/permission-person';

const TabPane = Tabs.TabPane;
let tabsAdmin = [
  {key: 'PERMISSION_ORG', name: messages('permission-setting.key36')/*组织权限*/},
  {key: 'PERMISSION_PERSON', name: messages('permission-setting.key9')/*适用人员*/},
]
let tabsFinance = [
  {key: 'PERMISSION_ORG', name: messages('permission-setting.key36')/*组织权限*/},
  {key: 'PERMISSION_DATA', name: messages('permission-setting.key37')/*数据权限*/},
  {key: 'PERMISSION_PERSON', name: messages('permission-setting.key9')/*适用人员*/},
]

class RolePermissionDetailSetting extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      edit: false,//顶部的信息是否正在编辑
      infoData: {},//顶部的基本信息
      infoList: [      //顶部基本信息字段
        {
          type: 'input',
          id: 'authorizationCode',
          isRequired: true,
          label:messages('permission-setting.key102')/*授权编码*/,
          render: desc => <span><Popover content={desc}>{desc ? desc : "-"}</Popover></span>
        },
        {
          type: 'input',
          id: 'authorizationDesc',
          isRequired: true,
          disabled: true,
          label: messages('permission-setting.key41')/*授权策略描述*/,
          render: desc => <span><Popover content={desc}>{desc ? desc : "-"}</Popover></span>
        },
        {
          type: 'input',
          id: 'authorizationType',
          isRequired: true,
          label: messages('permission-setting.key39')/*适用员工*/
        },
        // {
        //   type: 'input',
        //   id: 'authorizationName',
        //   isRequired: true,
        //   disabled: true,
        //   label: messages('permission-setting.key40')/*描述*/,
        //   render: desc => <span><Popover content={desc}>{desc ? desc : "-"}</Popover></span>
        // },
        {
          type: 'switch',
          id: 'enabled',
          label: messages('common.column.status')/*状态*/
        },
      ],
      nowStatus: 'PERMISSION_ORG',//默认激活的tab
      //tabs标题
      tabs: [],
      tabKey: {
        PERMISSION_ORG: 1,
        PERMISSION_DATA: 1,
        PERMISSION_PERSON: 1,
      }
    }
  }

  componentDidMount() {
    this.getAuthorizationItemDetail();
  }

  //查询授权策略详情
  getAuthorizationItemDetail = () => {
    let params = {
      authId: this.props.params.permissionId
    }
    RPService.getAuthorizationItemDetail(params)
      .then((res) => {
        let infoData = res.data;
        let tabs = [];
        //只有财务角色，且开启了数据权限
        if (infoData.permissionCategory === 'FINANCE' && infoData.enableDataPermission === true) {
          tabs = deepCopy(tabsFinance)
        } else {
          tabs = deepCopy(tabsAdmin)
        }
        this.setState({
          infoData,
          tabs
        })
      })
  }

  //点击
  onChangeTabs = (key) => {
    let {tabKey} = this.state;
    tabKey[key]++;
    this.setState({
      tabKey,
      nowStatus: key,
    })
  };
  //返回把进入页面的角色带出去
  handleBack = () => {
    let {location} = this.props;
    if (location.state && location.state.cRole && !isEmptyObj(location.state.cRole)) {
      this.context.router.push({
        pathname: menuRoute.getMenuItemByAttr('role-permission-setting', 'key').url,
        state: {
          cRole: location.state.cRole,
        },
      });
    } else {
      this.context.router.goBack();
    }
  };
  //渲染Tabs
  renderTabs = () => {
    const {infoData, tabs, tabKey} = this.state;
    if (infoData.orgPermissionId) {
      return (
        tabs.map(tab => {
          if (tab.key === 'PERMISSION_ORG') {
            return <TabPane
              tab={tab.name}
              key={tab.key}>
              <PermissionOrg
                key={tabKey.PERMISSION_ORG}
                policyData={infoData}
              />
            </TabPane>
          } else if (tab.key === 'PERMISSION_DATA') {
            return <TabPane
              tab={tab.name}
              key={tab.key}>
              <PermissionData
                key={tabKey.PERMISSION_DATA}
                policyData={infoData}
              />
            </TabPane>
          } else if (tab.key === 'PERMISSION_PERSON') {
            return <TabPane
              tab={tab.name}
              key={tab.key}>
              <PermissionPerson
                key={tabKey.PERMISSION_PERSON}
                policyData={infoData}
              />
            </TabPane>
          }
        })
      )
    } else {
      return <div className='loading-wrap'><Spin/></div>
    }
  }

  render() {
    const {edit, infoList, infoData} = this.state;
    return (
      <div className="role-permission-detail-wrap">
        <BasicInfo
          infoList={infoList}
          infoData={infoData}
          isHideEditBtn={true}
          updateHandle={this.handleUpdate}
          updateState={edit}/>
        {infoData.orgPermissionId && <Tabs onChange={this.onChangeTabs} style={{marginTop: 20}}>
          {this.renderTabs(infoData)}
        </Tabs>}
        <br/>
        <a style={{fontSize: '14px', paddingBottom: '20px'}}
           onClick={this.handleBack}>
          <Icon type="rollback" style={{marginRight: '5px'}}/>
          {/*返回*/}
          {messages('common.back')}
        </a>
      </div>
    )
  }
}

RolePermissionDetailSetting.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    organization: state.budget.organization,
    company: state.login.company,
    language: state.main.language,
    tenantMode: state.main.tenantMode
  }
}

export default connect(mapStateToProps)(RolePermissionDetailSetting);
